<template>
  <!-- 短信登录 -->
    <div class="duan_xin_contner">
        <div class="inputs">
            <div class="input_1">
                <input type="number" placeholder="手机号" v-model.number="x_longin_from.phone">
                <span  :class="{preview_black: isPhone_ok || get_proveNumber_Time>0}" @click="get_proveNumber_onfun">{{get_proveNumber_Time>0? `已发送(${get_proveNumber_Time})` : '获取验证码'}}</span>
            </div>
            <div class="input_2">
                <input type="text" placeholder="验证码" v-model="x_longin_from.code">
            </div>
        </div>
        <p class="tip_infor">
            温馨提示:未注册硅谷外卖帐号的手机号,登录<br>
            时将自动注册,且代表已同意<a href="http://www.baidu.com" style="color: #02a774 !important;">《用户服务协议》</a>
        </p> 
        <div class="login_btn" @click="x_login_onfun">登录</div>
        <div class="about_our"><a href="javascript:;">关于我们</a></div>
        <AlertTip :alertText="alertText" v-if="is_show_AlerTip" @closeTip="close_Tip_onfun" />
    </div>
</template>

<script>
    import {req_Sm_code,req_Sm_Login} from '../../req/req_fun.js'

    export default {
        data() {
            return {
                x_longin_from: {
                    phone: '',
                    code: ''
                },
                // 验证码倒计时
                get_proveNumber_Time:0,
                // 错误提示文本
                alertText:'',
                is_show_AlerTip: false
            }
        },
        computed: {
            isPhone_ok() {
                return /^1\d{10}$/.test(this.x_longin_from.phone);
            }
        },
        methods: {
            // 获取验证码 与倒计时
            async get_proveNumber_onfun() {
                if(this.isPhone_ok && this.get_proveNumber_Time <=0) {
                    this.get_proveNumber_Time = 30;
                    this.timer = setInterval(() => {
                        this.get_proveNumber_Time--;
                        if(this.get_proveNumber_Time <= 0) {
                            clearInterval(this.timer);
                        }
                    }, 1000);
                    const res_data =  await req_Sm_code(this.x_longin_from.phone);
                    if(res_data.code != 0) {
                        clearInterval(this.timer);
                        this.show_error_tip('发送验证码失败!')
                        if(this.get_proveNumber_Time > 0) this.get_proveNumber_Time = 0;  
                    }
                }
            },
            // 错误提示(预验证)
            show_error_tip(text) {
                this.alertText = text;
                this.is_show_AlerTip = true;
            },
            // 短信登录
            async x_login_onfun() {
                if(!this.isPhone_ok) {
                    this.show_error_tip('请正确输入手机号')
                }
                else if(!/^\d{6}$/.test(this.x_longin_from.code)) {
                    this.show_error_tip('验证码必须6位')
                }else {
                    // 请求登录
                    const res_data = await req_Sm_Login({phone: this.x_longin_from.phone, code: this.x_longin_from.code});
                    if(res_data.code != 0) {
                        this.show_error_tip('登录失败!');
                    }else {
                        this.$router.push('/');
                        return this.$Message.success('登录成功!');
                    }
                }
            },
            // 关闭提示
            close_Tip_onfun() {
                this.is_show_AlerTip = false;
            }
        },
    }
</script>

<style lang="stylus" scoped>
    .duan_xin_contner
        .inputs
            position relative
            margin-top 20px
            &>div
                background-color #fff
                position relative
                left 50% 
                transform translateX(-50%) 
                width 340px
                height 54px
                border 1px solid #ccc
                padding 3px
                display flex
                align-items center
                &:nth-child(1)
                    margin-bottom 10px
                    padding-right 50px
                    box-sizing border-box
                    &>span
                        // float right
                        position absolute
                        right 15px
                        // margin-right 50px 
                        color #ccc
                        font-size 15px
                        white-space nowrap
                        &.preview_black
                            color black   
                &:nth-child(2)
                    top 10px
                    box-sizing border-box
                input
                    flex 1
                    height 100%
                    border none
                    outline none
                    padding-left 20px
                    font-size 20px

        .tip_infor
            text-align center
            color #b8b8b8
            a
                color #b8b8b8
        .login_btn
            position relative
            left 50%
            width 320px
            height 40px
            background-color #4cd96f
            border-radius 3px
            text-align center
            line-height 40px
            transform translateX(-50%)
            color #fff
        .about_our
            text-align center
            margin-top 20px
            a
                color #b8b8b8
                text-align center
</style>